// VueRouter
// -----------
// + options
// + data
// + routeMap
// -----------
// + Constructor(options): VueRouter
// _ install(Vue): void
// + init(): void
// + initEvent(): void
// + createRouteMap(): void
// + initComponents(Vue): void
// install: 静态方法，是用来实现vue的插件机制
// Constructor：构造函数，初始化属性
// init：用来调用下面三个方法，这里把不同的代码分割到不同的方法中
// initEvent(): 用来注册popState事件，用来监听浏览器历史变化
// createRouteMap(): 用来初始化routeMap属性，把构造函数中传入的路由规则，转换为键值对的形式，存储到routeMap对象中中，键是路由地址，值是对应组件
// initComponents(Vue): 用来创建router-link和router-view组件
let _Vue = null
export default class VueRouter {
  constructor(options) {
    this.options = options
    this.routeMap = {} // 将options中的路由规则解析出来放入routeMap中 路由地址：路由组件
    this.data = _Vue.observable({
        current: window.location.hash.substr(1) || '/'
    })
    // data应该是响应式对象，其中的属性current记录当前地址，默认路由地址是/即根目录，vue.observable方法可以创建响应式对象，可以直接用在渲染函数或属性中
  }
  // 定义静态install方法
  // 使用vue.use注册插件时会使用install
  static install(Vue) {
    // 1. 判断当前插件是否已经被安装，如果已经安装就不需要再次安装
    if(VueRouter.install.isInstalled) {
      return
    }
    VueRouter.install.isInstalled = true
    // 2. 把vue构造函数记录到全局变量
    _Vue = Vue
    // 3. 把创建Vue实例时传入的router对象注入到Vue实例上
    _Vue.mixin({
      beforeCreate() {
        if (this.$options.router) {
          _Vue.prototype.$router = this.$options.router
          this.$options.router.init()
        }
      }
    })
  }
  // 遍历options中所以的路由规则，解析为键值对的形式存储到routeMap中
  createRouteMap() {
    this.options.routes.forEach(route => {
      this.routeMap[route.path] = route.component
    })
  }
  // 用来创建router-link和router-view组件
  initComponents(Vue) {
    let self = this
    Vue.component('router-link', {
      props: {
        to: String
      },
      render(h) {
        return h('a', {
          attrs: {
            href: this.to
          },
          on: {
            click: this.clickHandler
          }
        }, [this.$slots.default])
      },
      methods: {
        clickHandler(event) {
          window.location.hash = this.to
          self.data.current = this.to
          event.preventDefault()
        }
      }
    })
    console.log(this.data.current);
    // 创建router-view组件
    Vue.component('router-view', {
      render(h) {
        const component = self.routeMap[self.data.current]
        return h(component)
      }
    })
  }
  // 用来注册popState事件，用来监听浏览器历史变化
  initEvent() {
    window.addEventListener('hashchange', () => {
      this.data.current = window.location.hash.substr(1)
    })
  }
  // init：用来调用下面三个方法，这里把不同的代码分割到不同的方法中
  init() {
    this.createRouteMap()
    this.initComponents(_Vue)
    this.initEvent()
  }
}